<template>
  <!-- 祝福墙页面 -->
  <div class="blessing">
    <el-card>
      <div class="wall">
        <h2>祝福墙</h2>
        <div class="list">
          <div class="divide">
            <span class="title" :class="[isActive?'active':'']" @click="cutsort('time')">最新榜单</span>
            <span class="title" :class="[!isActive?'active':'']" @click="cutsort('heat')">热度祝福</span>
          </div>
          <!-- 列表展示组件 数组长度不等于0展示 -->
          <WallTemplate :wallsData="blessingData" v-if="blessingData.length !== 0"></WallTemplate>
          <!-- 等于0 -->
          <div v-else>努力加载数据中，请稍等</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
// 引入子组件
import WallTemplate from "@/views/wall_template/index.vue";
// 引入封装计算滚动距离函数
import { getRollLength } from "@/schema/getRollLength";
export default {
  data() {
    return {
      // blessingData: [], //祝福数据数组
      isActive: true, //控制切换模块
      num: 0, //获取数据的开始值
      isWait: true, //控制是否需要等待请求
    };
  },
  created() {
    // 监听滚动事件
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    //页面离开后销毁监听事件
    window.removeEventListener("scroll", this.handleScroll);
  },
  mounted() {
    this.$message({
      type: "success",
      message: "谢谢你来看我,愿世间美好都能与你环环相扣",
    });
    this.getblessing();
  },
  methods: {
    // 获取最新的祝福数据
    async getblessing() {
      // 通知vuex
      this.$store.dispatch("getblessing", this.num).then((res) => {
        if (res.result) {
          // 恢复节流 可以继续请求
          this.isWait = true;
        } else {
          return this.$message(res.message);
        }
      });
    },
    // 获取最热的祝福数据
    async getblessingByheat() {
      this.$store.dispatch("getblessingByheat", this.num).then((res) => {
        if (res.result) {
          // 恢复节流 可以继续请求
          this.isWait = true;
        } else {
          return this.$message(res.message);
        }
      });
    },
    // 切换排序
    cutsort(sort) {
      this.num = 0; //重设开始值
      if (sort === "time") {
        this.isActive = true; // 切换时间排序
        this.getblessing();
      } else if (sort === "heat") {
        this.isActive = false; // 切换热度排序
        this.getblessingByheat();
      }
    },
    handleScroll() {
      // 去判断是否触底
      let result = getRollLength();
      // 判断返回值是否为true
      if (result) {
        // 判断是否可以发起请求
        if (this.isWait) {
          this.num += 5;
          this.isWait = false;
          // 判断当前的模块，来获取不同数据
          if (this.isActive) {
            //时间排序
            this.getblessing();
          } else {
            //热度排序
            this.getblessingByheat();
          }
        }
      }
    },
  },
  computed: {
    blessingData() {
      if (this.isActive) {
        return this.$store.state.wish.blessingdatatime;
      } else {
        return this.$store.state.wish.blessingdataheat;
      }
    },
  },
  components: {
    WallTemplate,
  },
};
</script>

<style lang="less" scoped>
.blessing {
  padding-top: 10px;
  .el-card {
    width: 1000px;
    margin: 0 auto;
    h2 {
      text-align: center;
      font-weight: 700;
      color: #008c8c;
      margin-bottom: 10px;
    }
    // 列表展示区域
    .list {
      .divide {
        margin-bottom: 10px;
        padding-bottom: 5px;
        border-bottom: 1px solid #008c8c;
        .title {
          color: #8590a6;
          cursor: pointer;
          margin-right: 20px;
        }
        .active {
          font-weight: 700;
          color: #008c8c;
        }
        .title:hover {
          color: #008c8c;
        }
      }
    }
  }
}
</style>